<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:0 auto;
width: 500px;
background:url(src/1.2.jpg);
background-size:200px 200px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
#p1
{
	padding-top:200px;
}
#div2
{
background-origin:border-box;
}
#div3
{
background-origin:content-box;
}
</style>
</head>

<body>
<div>
	<p id="p1">上面是缩小的背景图片。</p>

	<p>下面是原始图片：<img src="src/1.2.jpg" alt="Flowers"></p>

	<p>background-origin:border-box:</p>
	<div id="div2">
	这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
	</div>

	<p>background-origin:content-box:</p>
	<div id="div3">
	这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
	</div>

</div>
</body>
</html>
